<template>
  <view class="content">
    <!-- 使用 scroll-view 组件来实现滚动 -->
    <scroll-view
      ref="list"
      scroll-y="true"
      class="list-container"
      @scroll="handleScroll"
      :scroll-top="state.startOffset"
    >
      <view class="list-phantom" :style="{ height: listHeight + 'px' }"></view>
      <view class="taskWrap" :style="{ transform: getTransform }">
        <view class="item" v-for="(item, index) in visibleData" :key="item.id">
          <view class="top">
            <img
              class="image"
              v-if="item.templateType == '健康监测'"
              src="https://ainengli.hzjrsw.com/jkhx/healthmMonitor.png"
              alt=""
            />
            <img
              class="image"
              v-else-if="item.templateType == '健康处方'"
              src="https://ainengli.hzjrsw.com/jkhx/prescription.png"
              alt=""
            />
            <img
              class="image"
              v-else-if="item.templateType == '饮食方案'"
              src="@/static/image/raozg/food.png"
              alt=""
            />
            <img
              class="image"
              v-else-if="item.templateType == '运动方案'"
              src="@/static/image/raozg/sports.png"
              alt=""
            />
            <img
              class="image"
              v-else-if="item.templateType == '健康宣教'"
              src="https://ainengli.hzjrsw.com/jkhx/propaganda.png"
              alt=""
            />
            <img
              class="image"
              v-else-if="item.templateType == '健康随访'"
              src="https://ainengli.hzjrsw.com/jkhx/followUp.png"
              alt=""
            />
            <img
              class="image"
              v-else-if="item.templateType == '用药提醒'"
              src="https://ainengli.hzjrsw.com/jkhx/remind.png"
              alt=""
            />
            <img class="image" v-else src="https://ainengli.hzjrsw.com/jkhx/visit.png" alt="" />
            <!-- <text class="name">{{ item.templateType }}+{{ item.id }}</text> -->
            <text class="name">{{ item.templateType }}</text>
            <text class="time">{{
              item.planTime
                ? transformTimeTwo(
                    new Date(item.planTime.replace(/\-/g, '/')).getTime(),
                    'minutesdd'
                  ).replace(/\//g, '-')
                : ''
            }}</text>
          </view>
          <view class="min">
            <view class="contents">{{ item.typeContent }}</view>
            <view
              :class="[
                'operation',
                item.isRead == false && item.dateStatus == 0
                  ? 'unfinished'
                  : item.isRead == false && item.dateStatus == 1
                  ? ''
                  : item.isRead == false && item.dateStatus == 2
                  ? 'noStart'
                  : 'on'
              ]"
              @tap="targetType(item)"
            >
              {{
                item.isRead == false && item.dateStatus == 0
                  ? '未完成'
                  : item.isRead == false && item.dateStatus == 1
                  ? '去完成'
                  : item.isRead == false && item.dateStatus == 2
                  ? '未开始'
                  : '已完成'
              }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import { reactive, watch, computed } from 'vue'
import { debounce } from '@/utils/tools'
import { transformTimeTwo } from '@/utils/hmm'
import store from '@/store'
const state = reactive({
  listHeight: 0,
  screenHeight: 0, // 屏幕高度即可视区域高度
  startOffset: 0, // 顶部偏移量
  startIndex: 0, // 可视化区域的数据开始下标
  endIndex: 0 // 可视化区域的数据结束下标
})
const props = defineProps({
  listData: {
    type: Array,
    default: () => []
  },
  //每项高度
  itemSize: {
    type: Number,
    default: 91
  },
  dateIndex: {
    type: Number,
    default: 0
  },
  defaultShow: {
    type: Boolean,
    default: true
  }
})
watch(
  () => props.dateIndex,
  (newValue, oldValue) => {
    uni.getSystemInfo({
      success: function (res) {
        state.screenHeight = res.screenHeight - 306
      }
    })
    let visibleCounts = Math.ceil(state.screenHeight / props.itemSize) || 0
    state.startOffset = 0
    state.startIndex = 0
    state.endIndex = 0
    for (let i = 0; i < props.listData.length; i++) {
      if (props.listData[i].today) {
        state.startIndex = i
        if (props.listData.length >= visibleCounts) {
          state.startOffset = state.startIndex * props.itemSize
        }
        state.endIndex = state.startIndex + visibleCounts
      } else {
        state.startOffset = state.startIndex * props.itemSize
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
)
const listHeight = computed(() => {
  let num = props.listData.length
  return num * props.itemSize
})
const visibleCount = computed(() => {
  uni.getSystemInfo({
    success: function (res) {
      state.screenHeight = res.screenHeight - 306
    }
  })
  return Math.ceil(state.screenHeight / (props.itemSize + 12)) || 0
})
const getTransform = computed(() => {
  return `translate3d(0, ${isNaN(state.startOffset) ? 0 : state.startOffset}px, 0)`
})
const visibleData = computed(() => {
  const end = Math.min(state.endIndex, props.listData.length)
  const start = Math.max(state.startIndex, 0)
  const data = props.listData.slice(start, end)
  return data
  // let minNum = Math.min(state.endIndex, props.listData.length)
  // if (minNum - state.startIndex < visibleCount.value) {
  //   if (minNum - visibleCount.value >= 0) {
  //     return props.listData.slice(
  //       minNum - visibleCount.value,
  //       Math.min(state.endIndex, props.listData.length)
  //     )
  //   } else {
  //     //   state.startOffset = 0
  //     return props.listData.slice(0, Math.min(state.endIndex, props.listData.length))
  //   }
  // } else {
  //   return props.listData.slice(state.startIndex, Math.min(state.endIndex, props.listData.length))
  // }
})

// 获取屏幕高度即可视化区域高度
// const getScreenHeight = () => {
//   uni.getSystemInfo({
//     success: function (res) {
//       state.screenHeight = res.screenHeight
//     }
//   })
// }
const handleScroll = debounce(
  (e) => {
    const scrollTop = Math.max(e.detail.scrollTop, 0)
    const maxScrollTop = listHeight.value - state.screenHeight

    if (scrollTop >= maxScrollTop && maxScrollTop > 0) {
      // 已经滚动到底部，不再更新索引
      state.startIndex = props.listData.length - visibleCount.value
      state.endIndex = props.listData.length
      state.startOffset = maxScrollTop
    } else {
      state.startIndex = Math.floor(scrollTop / props.itemSize)
      state.endIndex = state.startIndex + visibleCount.value

      // 确保 state.startOffset 计算时的 scrollTop 和 props.itemSize 都是有效数值
      state.startOffset =
        !isNaN(scrollTop) && !isNaN(props.itemSize) ? scrollTop - (scrollTop % props.itemSize) : 0
    }
  },
  10,
  ''
)
const targetType = (item) => {
  if (item.dateStatus == 2) {
    uni.showToast({
      title: '该健康任务暂未开始',
      icon: 'none'
    })
    return false
  } else {
    if (item.templateType == '健康监测') {
      uni.navigateTo({ url: '/packA/pages/healthPortrait/indexTwo' })
    } else if (item.templateType == '健康随访') {
      store.commit('SET_FOLLOW', item)
      if (item.isRead) {
        uni.navigateTo({
          url: '/packA/pages/follows/detail?name=' + item.itemName + '&type=' + 'read'
        })
      } else if (item.dateStatus == 0) {
        uni.navigateTo({
          url: '/packA/pages/follows/detail?name=' + item.itemName + '&type=' + 'timeout'
        })
      } else {
        uni.navigateTo({
          url: '/packA/pages/follows/fillin?name=' + item.itemName
        })
      }
    } else if (item.templateType == '健康宣教') {
      if (item.itemContent && JSON.parse(item.itemContent).id) {
        uni.navigateTo({
          url:
            '/packA/pages/popularScience/detail?id=' +
            JSON.parse(item.itemContent).id +
            '&isreadId=' +
            item.id +
            '&dateStatus=' +
            item.dateStatus
        })
      }
    } else if (item.templateType == '饮食方案') {
      //   if (item.itemContent && !item.isRead) {
      uni.navigateTo({
        url: '/packA/pages/dailyFood/foodDetail?id=' + item.id
      })
      //   }
    } else if (item.templateType == '运动方案') {
      //   if (item.itemContent && !item.isRead) {
      uni.navigateTo({
        url: '/packA/pages/sportsInformation/sportsDetail?id=' + item.id
      })
      //   }
    } else {
      uni.navigateTo({
        url: '/packA/pages/healthManage/detail?id=' + item.id + '&dateStatus=' + item.dateStatus
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  height: 100%;
  .list-container {
    height: 100%;
    overflow: auto;
    position: relative;

    .list-phantom {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      z-index: -1;
    }
    .list {
      left: 0;
      right: 0;
      top: 0;
      position: absolute;
      .list-item {
        text-align: center;
        border-bottom: 1px solid #ccc;
      }
    }
    .taskWrap {
      .item {
        background: #fafafa;
        border-radius: 12rpx;
        padding: 24rpx;
        margin-top: 24rpx;
        height: 176rpx;
        &:nth-child(1) {
          margin-top: 0;
        }
        .top {
          position: relative;
          margin-top: 5rpx;
          .image {
            display: inline-block;
            vertical-align: middle;
            width: 40rpx;
            height: 40rpx;
          }
          .name {
            display: inline-block;
            vertical-align: middle;
            margin-left: 16rpx;
            font-size: 32rpx;
            color: #222;
            font-weight: 700;
          }
          .time {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            font-size: 28rpx;
            color: #666;
          }
        }
        .min {
          position: relative;
          margin-top: 21rpx;
          .contents {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 24rpx;
            color: #666;
            padding: 8rpx 16rpx;
            background: #fff;
            border-radius: 4rpx;
            display: inline-block;
          }
          .operation {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            padding: 6rpx 23rpx;
            background: #00d1b6;
            border: 1rpx solid #00d1b6;
            font-size: 24rpx;
            color: #fff;
            border-radius: 38rpx;
            &.on {
              background: #fff;
              border-color: #00d1b6;
              color: #00d1b6;
            }
            &.unfinished {
              background: #fff;
              border-color: #cfcfcf;
              color: #666;
            }
            &.noStart {
              opacity: 0.5;
            }
          }
        }
      }
    }
  }
}
</style>
